<template>
	<div class="vue-flex">
		<div class="block"><el-avatar :size="40" :src="headImg"></el-avatar></div>
		<el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect">
			<el-submenu index="1">
				<template slot="title">
					{{userName}}
				</template>
				<el-menu-item index="1">个人中心</el-menu-item>
				<el-menu-item index="2">退出登录</el-menu-item>
			</el-submenu>
		</el-menu>
	</div>
</template>

<script>
import { getUserInfo } from '../../network/api';
export default {
	name: 'Breadcrumb',
	data() {
		return {
			userName:'',
			headImg:'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
		};
	},
	components: {},
	created() {},
	mounted() {
		// 上个页面的参数 id
		getUserInfo().then(res => {
			// console.log(res.retData);
			this.userName = res.retData.userName
			this.headImg = res.retData.avatar
		});
	},
	methods: {
		handleSelect(key, keyPath) {
			// console.log(key, keyPath);
			if(keyPath[1] == 1){
				console.log('用户中心')
				this.$router.push('/index/personal')
			}else if(keyPath[1] == 2){
				console.log('退出登录')
				localStorage.clear()
				// localStorage.removeItem('username')
				this.$router.push('/login')
			}
		},
	}
};
</script>
<style lang="scss" scoped>
.el-menu{
	background:none;
}

.el-menu--horizontal /deep/ .el-submenu.is-active .el-submenu__title {
    border-bottom: 2px solid #EEEEEE; 
    color: #303133;
}

</style>
